﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link href="css/crop.css" type="text/css" rel="stylesheet" media="screen,projection" />
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="script/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="script/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="script/jquery.fileupload.js"></script>

    <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="script/lxwcrop.js"></script>
</head>
<body>
    支持滚轴放大缩小，图片拖动位置(上传图片和裁切图片均通过后台程序处理)，不受浏览器限制
    <div class="crop_container">
        <div class="preview"><img /></div>
        <div class="option">
            <a href="javascript:void(0)">
                <input type="file" name="files" />上传
            </a>
            <div>
                <input type="button" class="fangda" value="放大" />
                <input type="button" class="suoxiao" value="缩小" />
                <input type="button" class="save" value="上传图片流" />
            </div>
        </div>
    </div>
    <img class="show" style="border:1px solid yellow;margin-top:10px;" />
</body>
</html>

<script>
    $(function () {
        var crop = $(".crop_container").UploadImageCrop({url:'upload.aspx'});
        $(".save").click(function () {
            crop.data(function (json) {
                alert(json.link);
            });
        });
    });

</script>
